<template>
<!-- <img src="../assets/imgs/product" alt=""> -->
    <div class="product">
        <header>
            <hoomnavbar :active-index="2"/>
        </header>
        <main>
            <div class="swiper-wrap">
                <swiper :options="swiperOptions">
                    <swiper-slide>
                        <img src="../../assets/imgs/product/banner_1.png" alt="">
                    </swiper-slide>
                    <swiper-slide>
                        <img src="../../assets/imgs/product/banner_1.png" alt="">
                    </swiper-slide>
                    <swiper-slide>
                        <img src="../../assets/imgs/product/banner_1.png" alt="">
                    </swiper-slide>
                    <swiper-slide>
                        <img src="../../assets/imgs/product/banner_1.png" alt="">
                    </swiper-slide>
                    <swiper-slide>
                        <img src="../../assets/imgs/product/banner_1.png" alt="">
                    </swiper-slide>
                </swiper>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
            <div class="top-tips">
                <img src="../../assets/imgs/product/product.png" alt="">
            </div>
            <article class="produce-container">
                <div class="produce-container-bg">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                <div class="product-content">
                    <ul>
                        <li class="product-item">
                            <router-link to="/product/qht">
                                <div class="product-item-dot">
                                    <ul>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                    </ul>
                                </div>
                                <div class="product-item-left">
                                    <div class="product-item-left-top">
                                        <div class="title-bg-wrap animater-el" data-animater="animate__fadeInDown">
                                            <h2>企汇通</h2>
                                        </div>
                                        <b class="animater-el"  data-animater="animate__fadeInDown">--智慧门店云管理系统</b>
                                    </div>
                                    <div class="product-item-left-bottom">
                                        <div class="product-item-left-text animater-el" data-animater="animate__fadeInDown">
                                            138项管理操作、15大功能模块，是一款着力解决企业管理会员、商户、员工、商品、收银的云利器
                                        </div>
                                        <div class="product-item-left-project">
                                            <ul>
                                                <li class="animater-el" data-animater="animate__fadeInDown">
                                                    <span class="iconfont shouyin"></span>
                                                    收银管理
                                                </li>
                                                <li class="animater-el" data-animater="animate__fadeInDown">
                                                    <span class="iconfont shangpin"></span>
                                                    商品管理
                                                </li>
                                                <li class="animater-el" data-animater="animate__fadeInDown">
                                                    <span class="iconfont huiyuan1"></span>
                                                    会员管理
                                                </li>
                                                <li class="animater-el" data-animater="animate__fadeInDown">
                                                    <span class="iconfont yuangongguanli"></span>
                                                    员工管理
                                                </li>
                                                <li class="animater-el" data-animater="animate__fadeInDown">
                                                    <span class="iconfont liansuodian"></span>
                                                    连锁管理
                                                </li>
                                                <li class="animater-el" data-animater="animate__fadeInDown">
                                                    <span class="iconfont baobiao"></span>
                                                    报表管理
                                                </li>
                                            </ul>
                                        </div>
                                        
                                    </div>
                                </div>
                                <div class="product-item-right">
                                    <img class="bg-img animater-el"  data-animater="animate__fadeInLeft" src="../../assets/imgs/product/qht_bg.png" alt="">
                                    <div class="product-pic animater-el" data-animater="animate__fadeInLeft" data-delay="true">
                                        <img src="../../assets/imgs/product/qht_pic.png" alt="">
                                    </div>
                                </div>
                            </router-link>
                        </li>
                         <li class="product-item">
                            <router-link to="/product/ipsystem">
                            <div class="product-item-dot">
                                <ul>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                            <div class="product-item-left">
                                <div class="product-item-left-top">
                                    <div class="title-bg-wrap animater-el" data-animater="animate__fadeInDown">
                                       <h2>IP系统</h2>
                                    </div>
                                    <b class="animater-el" data-animater="animate__fadeInDown">--商家IP、员工IP打造</b>
                                </div>
                                <div class="product-item-left-bottom">
                                    <div class="product-item-left-text animater-el" data-animater="animate__fadeInDown">
                                        为商家、员工及会员提供一个分享展示的平台，不仅可以发布个人作品，还可以尽情互动、关注、预约，增强会员粘性
                                    </div>
                                    <div class="product-item-left-project">
                                        <ul>
                                            <li class="animater-el" data-animater="animate__fadeInDown">
                                                <span class="iconfont ip"></span>
                                                IP打造
                                            </li>
                                            <li class="animater-el" data-animater="animate__fadeInDown">
                                                <span class="iconfont shejiao"></span>
                                                社交互动
                                            </li>
                                            <li class="animater-el" data-animater="animate__fadeInDown">
                                                <span class="iconfont liuliangtongji"></span>
                                                 私域流量
                                            </li>
                                        </ul>
                                    </div>
                                    
                                </div>
                            </div>
                            <div class="product-item-right">
                                <img class="bg-img animater-el"  data-animater="animate__fadeInRight" src="../../assets/imgs/product/ip_system_bg.png" alt="">
                                <div class="product-pic animater-el" data-animater="animate__fadeInRight" data-delay="true">
                                    <img src="../../assets/imgs/product/ip_system_pic.png" alt="">
                                </div>
                            </div>
                            </router-link>
                        </li>
                        <li class="product-item">
                            <router-link to="/product/mbmh">
                            <div class="product-item-dot">
                                <ul>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                            <div class="product-item-left">
                                <div class="product-item-left-top">
                                    <div class="title-bg-wrap animater-el" data-animater="animate__fadeInDown">
                                       <h2>美帮美汇</h2>
                                    </div>
                                    <b class="animater-el" data-animater="animate__fadeInDown">--社交分享，全网裂变传播</b>
                                </div>
                                <div class="product-item-left-bottom">
                                    <div class="product-item-left-text animater-el" data-animater="animate__fadeInDown">
                                        商家可以邀请其他商家形成异业联盟，资源互换，达到利益最大化，协同传统企业无缝对接互联网+经济时代
                                    </div>
                                    <div class="product-item-left-project">
                                        <ul>
                                            <li class="animater-el" data-animater="animate__fadeInDown">
                                                <span class="iconfont shangcheng1"></span>
                                                精选商城
                                            </li>
                                            <li class="animater-el" data-animater="animate__fadeInDown">
                                                <span class="iconfont lianmeng"></span>
                                                异业联盟
                                            </li>
                                            <li class="animater-el" data-animater="animate__fadeInDown">
                                                <span class="iconfont shejiao"></span>
                                                 社交传播
                                            </li>
                                        </ul>
                                    </div>
                                    
                                </div>
                            </div>
                            <div class="product-item-right">
                                <img class="bg-img animater-el"  data-animater="animate__fadeInLeft" src="../../assets/imgs/product/meibangmeihui_bg.png" alt="">
                                <div class="product-pic animater-el" data-animater="animate__fadeInLeft"  data-delay="true">
                                    <img class="product-pic1" src="../../assets/imgs/product/meibangmeihui_pic.png" alt="">
                                    <img class="product-pic2" src="../../assets/imgs/product/meibangmeihui__activepic.png" alt="">
                                </div>
                            </div>
                            </router-link>
                        </li>
                    </ul>
                </div>

            </article>
        </main>
        <footer>
            <hoomfooter/>
        </footer>
    </div>
</template>
<script>
import Observer from '../../utils/observer.js'
import 'swiper/css/swiper.css'
import hoomnavbar from '@/components/hoomnavbar.vue'
import hoomfooter from '@/components/hoomfooter.vue'

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
export default {
    components:{
        hoomnavbar,
        hoomfooter,
        Swiper, 
        SwiperSlide
    },
    data(){
        return{
            swiperOptions:{
                autoplay: true,
                loop: true,
                navigation:{
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                observer:'',
            },
        }
    },
    mounted(){
        const els2 = document.querySelectorAll('.animater-el')
        this.observer = Observer({
                els:els2,
                threshold:0.2
            },(el)=>{
                const classStr = el.dataset.animater.split(',');
                const delay = el.dataset.delay;
                if(delay) return setTimeout(()=>{
                    el.style.visibility = 'visible';
                    el.classList.add(classStr[0])
                },400)
                el.style.visibility = 'visible';
                el.classList.add(classStr[0])
            })
    },
    beforeDestroy(){
        this.observer && window.removeEventListener('scroll',this.observer)
    },
}
</script>
<style lang="less" scoped>
@import '../../assets/css/variable.less';
.product{
    .swiper-wrap{
        position: relative;
        .swiper-button-prev,.swiper-button-next{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 20 * @crem;
            height: 36 * @crem;
            z-index: 10;
            color: #ffffff;
            outline: none;
        }
        .swiper-button-prev{
            left: 128 * @crem;
        }
        .swiper-button-next{
            right: 128 * @crem;
        }
        .swiper-container{
            height: 700 * @crem;
            .swiper-slide{
                position: relative;
                overflow: hidden;
            }
            img{
                position: absolute;
                left: 50%;
                top: 0;
                transform: translateX(-50%);
                
                height: 100%;
                // width: 100%;
                // min-width: 90%;
                // width: 100%;
                object-fit: cover;

                
            }
        }
    }
    .top-tips{
        margin-top: 40 * @crem;
        height: 288 * @crem;
        img{
            height: 100%;
        }
    }
    .produce-container{
        position: relative;
        overflow: hidden;
        padding-bottom: 237 * @crem;
        .produce-container-bg{
            position: absolute;
            top: 192 * @crem;
            width: 100%;
            li:nth-child(1){
                height: 1048 * @crem;
                background: url('../../assets/imgs/product/product_bg1.png') center no-repeat;
                background-size: cover;
            }
            li:nth-child(2){
                height: 1048 * @crem;
                background: url('../../assets/imgs/product/product_bg2.png') center no-repeat;
                background-size: cover;
            }
            li:nth-child(3){
                height: 1048 * @crem;
                margin-top: 150 * @crem;
                background: url('../../assets/imgs/product/product_bg3.png') center no-repeat;
                background-size: cover;
            }
        }
        .product-content{
            padding-top: 67 * @crem;
            .product-item{
                width: 1682 * @crem;
                height: 914 * @crem;
                margin: 0 auto;
                position: relative;
                border-radius: 50 * @crem;
                box-shadow: 0px 0px 60 * @crem -30 * @crem gray;
                background: #fff;
                margin-top: 170 * @crem;
                .product-item-dot{
                    position: absolute;
                    right: 50 * @crem;
                    top: 95 * @crem;
                    width: 95 * @crem;
                    height: 15 * @crem;
                    ul{
                        height: 100%;
                        display: flex;
                        flex-flow: row nowrap;
                        justify-content: space-between;
                        align-items: center;
                        li{
                            width: 15 * @crem;
                            height: 100%;
                            border-radius: 50%;
                            background: #B9B9B9;
                        }
                    }
                }
                .product-item-left{
                    float: left;
                    height: 100%;
                    width: 50%;
                    box-sizing: border-box;
                    padding-left: 90 * @crem;
                    .product-item-left-top{
                        height: 50%;
                        display: flex;
                        flex-flow: column nowrap;
                        justify-content: flex-end;
                        align-items: flex-start;
                        color: #4590E6;
                        b{
                            display: inline-block;
                            margin-top: 25 * @crem;
                            font-size: 36 * @crem;
                            font-weight: 500;
                            text-align: left;

                        }
                        h2{
                            position: absolute;
                            bottom: -18 * @crem;
                            left: 0;
                            font-size: 96 * @crem;
                            font-weight: bold;
                        }
                    }
                    .product-item-left-bottom{
                        height: 50%;
                        box-sizing: border-box;
                        padding-top: 40 * @crem;
                        // display: flex;
                        // flex-flow: column nowrap;
                        // justify-content: space-between;
                        // align-items: flex-start;
                        .product-item-left-text{
                            // text-indent: 2em;
                            text-align: left;
                            // height: 40%;
                            width: 680 * @crem;
                            font-size: 24 * @crem;
                            color: #4E4E4E;
                            line-height: 47 * @crem;
                        }
                        .product-item-left-project{
                            // height: 60%;
                            margin-top: 72 * @crem;
                            width: 680 * @crem;
                            ul{
                                overflow: hidden;
                            }
                            li{
                                float: left;
                                width: 33%;
                                font-size: 24 * @crem;
                                color: #4592E6;
                                text-align: left;
                                display: flex;
                                flex-flow: row nowrap;
                                align-items: center;
                                .iconfont{
                                    display: inline-block;
                                    width: 34 * @crem;
                                    height: 34 * @crem;
                                    border-radius: 50%;
                                    background-color: #6CA4FF;
                                    margin-right: 16 * @crem;
                                    line-height: 34 * @crem;
                                    text-align: center;
                                    color: #fff;
                                    font-size: 24 * @crem;
                                }
                            }
                            li:nth-child(n+4){
                                margin-top: 30 * @crem;

                            }
                        }

                    }
                }
                .product-item-right{
                    float: left;
                    width: 50%;
                    height: 100%;
                    position: relative;
                    box-sizing: border-box;
                    overflow: hidden;
                    .product-pic{
                        img{
                            position: relative;
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }

            .product-item:nth-child(2n-1){
                .product-item-left{
                    float: right;
                }
                .product-item-right{
                    float: right;
                }
            }
            .product-item:nth-child(2n){
                .product-item-left{
                    float: left;
                }
                .product-item-right{
                    float: left;
                }
            }
            .product-item:nth-child(1){
                margin-top: 0;
                .title-bg-wrap{
                    height: 255 * @crem;
                    width: 404 * @crem;
                    background:url('../../assets/imgs/product/qht.png') center no-repeat;
                    background-size: cover;
                    position: relative;
                    
                }
                .bg-img{
                        width: 773 * @crem;
                        height: 800 * @crem;
                        position: absolute;
                        left: 0;
                        top: 80 * @crem;
                    }
                    .product-pic{
                        width: 760 * @crem;
                        height: 485 * @crem;
                        margin-top: 222 * @crem;
                        margin-left: 43 * @crem;
                        // position: ;
                    }
                
            }
            .product-item:nth-child(2){
                .title-bg-wrap{
                    height: 150 * @crem;
                    width: 600 * @crem;
                    background:url('../../assets/imgs/product/ip_system.png') center no-repeat;
                    background-size: contain;
                    position: relative;
                }
                .bg-img{
                        width: 836 * @crem;
                        height: 800 * @crem;
                        position: absolute;
                        right: 0;
                        // top: 80 * @crem;
                        bottom: -150 * @crem;
                }
                .product-pic{
                    width: 1500 * @crem;
                    height: 820 * @crem;
                    // margin-top: 222 * @crem;
                    // margin-left: 43 * @crem;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    
                }
            }
            .product-item:nth-child(3){
                .title-bg-wrap{
                    height: 275 * @crem;
                    width: 540 * @crem;
                    background:url('../../assets/imgs/product/meibangmeihui.png') center no-repeat;
                    background-size: contain;
                    position: relative;
                }
                .bg-img{
                        width: 773 * @crem;
                        height: 800 * @crem;
                        position: absolute;
                        left: -130 * @crem;
                        top: 80 * @crem;
                }
                .product-pic{
                    position: absolute;
                    top: 0;
                    left: 50 * @crem;
                    width: 700 * @crem;
                    height: 630 * @crem;
                    margin-top: 222 * @crem;
                    margin-left: 43 * @crem;
                }
                .product-pic2{
                    display: none;
                }
            }
            .product-item:nth-child(1):hover{
                // background: url('');
                background: url('../../assets/imgs/product/active_bg.png') center no-repeat;
                background-size: cover;
                .bg-img{
                    display: none;
                }
                .title-bg-wrap{
                    background-image: url('../../assets/imgs/product/qht_active.png');
                }
                .product-item-dot li{
                    background: #fff;
                }
                .product-item-left-top,
                .product-item-left-text,
                .product-item-left-project li{
                    color: #fff !important;
                    .iconfont{
                        background: #fff;
                        color: #4A96EA;
                    }
                }
            }
            .product-item:nth-child(2):hover{
                background: url('../../assets/imgs/product/active_bg.png') center no-repeat;
                background-size: cover;
                
                .title-bg-wrap{
                    background-image: url('../../assets/imgs/product/ip_system_active.png');
                }
                .product-item-dot li{
                    background: #fff;
                }
                .product-item-left-top,
                .product-item-left-text,
                .product-item-left-project li{
                    color: #fff !important;
                    .iconfont{
                        background: #fff;
                        color: #4A96EA;
                    }
                }
            }
            .product-item:nth-child(3):hover{
                background: url('../../assets/imgs/product/active_bg.png') center no-repeat;
                background-size: cover;
                .title-bg-wrap{
                    background-image: url('../../assets/imgs/product/meibangmeihui_active.png');
                }
                .bg-img{
                    display: none;
                }
                .product-item-dot li{
                    background: #fff;
                }
                .product-pic1{
                    display: none;
                }
                .product-pic2{
                    display: block;
                }
                .product-item-left-top,
                .product-item-left-text,
                .product-item-left-project li{
                    color: #fff !important;
                    .iconfont{
                        background: #fff;
                        color: #4A96EA;
                    }
                }
            }
        }
    }
}
</style>